<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按钮列表</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
<!--普通按钮 -->
<div class="row">
	<input type="checkbox" name="sex" id="male" class="chooseBtn" />
	<label for="male" class="choose-label"></label>
</div>

<!-- 6款不同按钮 -->
<div class="row">
		<input type="checkbox" id="simple_1">
		<label for="simple_1"></label>
		<input type="checkbox" id="simple_2">
		<label for="simple_2" class="red"></label>
		<input type="checkbox" id="simple_3">
		<label for="simple_3" class="green"></label>
	</div>

	<div class="row">
		<input type="checkbox" id="md_1">
		<label for="md_1"></label>
		<input type="checkbox" id="md_2">
		<label for="md_2" class="red"></label>
		<input type="checkbox" id="md_3">
		<label for="md_3" class="green"></label>
	</div>

	<div class="row">
		<input type="checkbox" id="mds_1">
		<label for="mds_1"></label>
		<input type="checkbox" id="mds_2">
		<label for="mds_2" class="red"></label>
		<input type="checkbox" id="mds_3">
		<label for="mds_3" class="green"></label>
	</div>

	<div class="row">
		<input type="checkbox" id="border_1">
		<label for="border_1"></label>
		<input type="checkbox" id="border_2">
		<label for="border_2" class="red"></label>
		<input type="checkbox" id="border_3">
		<label for="border_3" class="green"></label>
	</div>

	<div class="row">
		<input type="checkbox" id="inset_1">
		<label for="inset_1"></label>
		<input type="checkbox" id="inset_2">
		<label for="inset_2" class="red"></label>
		<input type="checkbox" id="inset_3">
		<label for="inset_3" class="green"></label>
	</div>

	<div class="row">
		<input type="checkbox" id="box_1">
		<label for="box_1"></label>
		<input type="checkbox" id="box_2">
		<label for="box_2" class="red"></label>
		<input type="checkbox" id="box_3">
		<label for="box_3" class="green"></label>
	</div>
	<div class="row">
		<p>
			<a href="btn-on-off.html">点这里查看带文字的按钮</a>
		</p>
	</div>
</body>
</html>